import { defineComponent, reactive, watch } from 'vue'
import MsTable from '@/components/Tables'
import DictTypeForm from './Form'
import { message } from 'ant-design-vue'
import { IDictType } from '@/typings'
import useTable from '@/hooks/useTable'
import { deleteDict } from '@/api/sys/dict'

export default defineComponent({
  name: 'DictType',
  props: {
    onRow: Function
  },
  emits: ['row'],
  setup(props, { emit }) {
    const { msTable, searchTable, tableData: state } = useTable()
    const tableConf = {
      columns: [
        { dataIndex: 'typeValue', title: '类型名称' },
        { dataIndex: 'name', title: '标识' },
        { title: '操作', slots: { customRender: 'action' } }
      ]
    }

    const handleDelDict = (id: string) => {
      deleteDict(id).then((res) => {
        if (res.state) {
          message.success(res.msg)
          searchTable()
        }
      })
    }

    const tableSolts = {
      action: ({ record }: { record: IDictType }) => (
        <>
          <a onClick={() => emit('row', record.id)}>配置</a>
          <a-divider type="vertical" />
          <a onClick={() => { state.currentId = record.id; state.dialogVisible = true }}>修改</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" onConfirm={() => handleDelDict(record.id as string)}>
            <a>删除</a>
          </a-popconfirm>
        </>
      )
    }

    return () => {
      return (
        <>
          <a-card title="字典表" bordered={false}>
            <a-button v-has={[['dict:save']]} type="primary" onClick={() => { state.currentId = ''; state.dialogVisible = true }}>添加</a-button>
            <MsTable ref={msTable} columns={tableConf.columns} api="/sys/dictType/list" rowKey="typeValue" v-slots={tableSolts} />
            <DictTypeForm v-model={[state.dialogVisible, 'visible']} formId={state.currentId} />
          </a-card>
        </>
      )
    }
  }
})
